<template>
  <section class="app-container" :class="{'mini-side': isCollapse,'hide-side': hideSide}">
    <el-header class="app-header" :height="headerHeight + 'px'">
      <app-header @switch="handleSideSwitch" @set-theme="handleSetTheme" @hide-side="handleSwitchHideSide"></app-header>
    </el-header>
    <div class="app-bottom cb-list" :style="{top: headerHeight + 'px'}">
      <el-aside v-if="$store.state.app.showLeftMenu" class="app-side list-left" :width="hideSide ? '0' : sideWidth + 'px'"
                :style="{background: theme}">
        <app-side :collapse="isCollapse" :theme="theme" :uniqueOpened="true"></app-side>
      </el-aside>
      <el-container class="h100 list-content" style="overflow-x: auto">
        <tags-view v-if="$store.state.app.showTags" class="w100" :theme="theme"></tags-view>
        <el-main class="app-body" :style="{top: $store.state.app.showTags ? '32px' : 0 }">
          <el-main class="app-page-body" ref="main" :style="{bottom: footerHeight + 'px'}">
            <keep-alive :include="cachedViews">
              <router-view></router-view>
            </keep-alive>
          </el-main>
          <el-footer class="app-footer" :height="footerHeight + 'px'">
            <app-footer></app-footer>
          </el-footer>
        </el-main>
      </el-container>
    </div>
    <m-back-top body-id="appBody"></m-back-top>
  </section>
</template>
<script type="text/javascript">
  import AppHeader from '@/components/layout/app-header'
  import AppFooter from '@/components/layout/app-footer'
  import TagsView from '@/components/layout/TagsView'
  import AppSide from '@/components/layout/app-side'
  import MBackTop from '@/components/plugins/back-top'
  import { stompClient } from '@/assets/mixins/stomp-client'

  export default {
    name: 'app-view',
    components: {
      AppHeader,
      AppFooter,
      TagsView,
      AppSide,
      MBackTop
    },
    mixins: [stompClient],
    data () {
      return {
        isCollapse: false,
        hideSide: false,
        sideWidth: 260,
        footerHeight: 30,
        headerHeight: 36,
        theme: ''
      }
    },
    computed: {
      cachedViews () {
        return this.$store.state.tagsView.cachedViews
      },
      key () {
        return this.$route.path
      }
    },
    created () {
      window.document.title = this.$t('common.platform_name')
    },
    methods: {
      doCollectGarbage () { // 触发IE垃圾收集
        if (isIE()) {
          if (typeof window.CollectGarbage === 'function') {
            setTimeout(CollectGarbage(), 1)
          }
        }
        function isIE () {
          return !!window.ActiveXObject || 'ActiveXObject' in window
        }
      },
      handleSideSwitch (val) {
        this.isCollapse = val
        this.sideWidth = val ? 60 : 240
      },
      handleSwitchHideSide () {
        this.hideSide = !this.hideSide
      },
      handleSetTheme (theme) {
        this.theme = theme
      }
    }
  }
</script>
<style lang="scss">
  .app-container {
    margin: 0 auto;
    position: absolute;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    overflow: hidden;
  }

  .app-container .app-header {
    padding: 0;
    overflow: visible;
    z-index: 100;
  }

  .app-container .app-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0;
  }

  .app-container .app-side {
    height: 100%;
    overflow-x: hidden;
    transition: all 0.5s ease;
    background-color: #ECF0F5;
  }

  .app-container .app-body {
    background: #ECF0F5;
    width: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 32px;
    left: 0;
    bottom: 0;
  }

  .app-container .app-page-body {
    overflow-y: auto;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 30px;
  }

  .app-container .app-footer {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
  }

  /*mini-side*/
  .app-container.mini-side .app-side {
    overflow: visible;
  }

  .app-container.mini-side .app-side .side-menu {
    width: 100%;
    overflow-x: hidden;
  }

  /*hide-side*/

  .app-container.hide-side .app-side {
    display: none;
  }

  .el-pagination {
    float: right;
    margin-top: 15px;
  }

  .el-table .cell {
    padding: 0!important;
    line-height: 17px !important;
  }

  .el-table .el-table__header,
  .el-table th {
    padding: 0 !important;
    height: 30px;
    background-color: #409eff !important;
    .cell{
      color: #FFFFFF!important;
    }
  }


  .el-table td {
    font-size: 13px!important;
    height: 30px;
    padding: 0 !important;
  }
  .el-table--striped tr:nth-child(2n)>td{
    background: #dcdfe6!important;
  }

  .el-collapse-item__header,
  .el-collapse-item__header.is-active {
    border-bottom: 1px solid #ebeef5 !important;
  }

  .el-collapse-item__header {
    background: #F3F3F3 !important;
    padding-left: 8px;
  }

  .el-tabs__item:focus.is-active.is-focus:not(:active) {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  .el-dialog--center .el-dialog__body {
    padding: 10px 15px!important;
    font-size: 13px!important;
  }
  .el-form--inline .el-form-item{
    margin-bottom: 18px!important;
  }
  .el-form-item__error{
    padding-top: 3px!important;
  }
  .el-form-item__content{
    font-size: 13px!important;
  }
  .el-date-editor .el-range-separator{
    line-height: 26px !important;
  }
  .el-form .el-button{
    font-size: 13px!important;
  }
  .el-form-item__label{
    font-size: inherit!important;
    font-weight: 700!important;
  }
  .el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row>td{
    background-color: #c6e2ff!important
  }
  .el-divider__text, .el-link{
    font-size: 13px!important;
  }
  .el-input,.el-textarea{
    font-size: 13px!important;
  }
  .el-divider--horizontal {
    margin: 0!important;
  }
  .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner{
    color: #909399!important;
  }
</style>
